@charset "utf-8";
@import"./modules/header";
@import"./modules/footer";

.active{
	border: 1px solid red;
}
.infoBox{
	min-height: 1200px;
	position: relative;
	.infoTop{
		width: 1200px;
		height: 650px;
		margin: 0 auto;
		display: flex;
		justify-content: space-around;
		.infoLeft{
			width: 450px;
			height: 600px;
			margin-top: 20px;
			display: flex;
			flex-direction: column;
			.showBox{
				width: 450px;
				height: 450px;
				background-color: palevioletred;
				img{
					width: 450px;
					height: 450px;
				}
			}
			#showUl{
				list-style: none;
				padding-left: 0;
				width: 450px;
				height: 100px;
				border: 1px solid #8B0000;
				display: flex;
				justify-content: space-around;
				align-items: center;
				li{
					width: 80px;
					height: 80px;
					.zoomGalleryActive{
						display: block;
						border: 1px solid red;
						width: 80px;
						height: 80px;
					}
					img{
						width: 80px;
						height: 80px;
					}	
				}
			}
		}
		.infoRight{
			width: 700px;
			height: 600px;
			margin-top: 20px;
			h2{
				font-size: 20px;
			}
			p{
				color: firebrick;
				margin-left: 10px;
			}
			.price{
				width: 650px;
				height: 155px;
				margin: 0 auto;
				padding: 5px 10px;
				background-color: lightgray;
				p{
					font-size: 25px;
					margin: 5px 0;
				}
				div{
					b{
						font-size: 12px;
						line-height: 20px;
						color: red;
						border: 1px solid red;
					}
					span{
						font-size: 12px;
						line-height: 20px;
						margin-left: 10px;
					}
				}
			}
			i{
				display: block;
				margin: 10px 20px;
				font-size: 12px;
				color: dimgray;
			}
			hr{
				color: slategray;
			}
			.sizeBox{
				width: 680px;
				height: 112px;
				margin: 10px 0 0 20px;
				b{
					font-size: 15px;
				}
				span{
					text-align: center;
					display: inline-block;
					margin: 15px 10px;
					// border: 1px solid red;
					padding: 2px 5px;
					cursor: pointer;
				}
			}
			ul{
				list-style: none;
				width: 300px;
				display: flex;
				li{
					border: 1px solid #000;
					width: 20px;
					text-align: center;
					cursor: pointer;
				}
				input{
					width: 30px;
					margin: 0 10px;
				}
			}
			.addBox{
				margin-top: 10px;
				display: flex;
				width: 400px;
				a{
					margin-left: 20px;
					text-decoration: none;
					width: 170px;
					height: 46px;
					line-height: 46px;
					font-size: 25px;
					text-align: center;
					color: #fff;
					background-color: orangered;
				}
			}
		}
	}
	.infoBottom{
		width: 1200px;
		min-height: 800px;
		border: 1px solid gray;
		margin: 0 auto;
		h3{
			text-align: center;
			line-height: 25px;
		}
		img{
			display: block;
			width: 800px;
			height: 1000px;
			margin: 0 auto;
		}
	}
	.addSuccess{
		width: 300px;
		height: 150px;
		background-color: rgba($color: #000000, $alpha: 0.6);
		color: #fff;
		position: fixed;
		left: 50%;
		top: 50%;
		margin-left: -150px;
		margin-top: -75px;
		text-align: center;
		line-height: 150px;
		font-size: 25px;
		border: 2px solid ghostwhite;
		border-radius: 15px;
		display: none;
	}
}
